<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>黑马博客首页</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body>

  <%- include('./layout/header.ejs')%>


  <ul class="list-group">
    <% list.forEach(item => { %>
    <li class="list-group-item">
      <span class="badge" style="background-color:#5bc0de;">
        <strong>发表时间：</strong>
        <%= item.ctime %>
      </span>
      <span class="badge" style="background-color:#f0ad4e;">
        <strong>作者昵称：</strong>
        <%= item.nickname %>
      </span>
      <a href="/article/detail?id=<%= item.id %>">
        <%= item.title %>
      </a>
    </li>
    <% }) %>
  </ul>

  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li>
        <!-- 以下控制显示上一页的，这个上一页不能无限制的上一页，如果跳到第一页，就始终给它设置为第一页，如果还没到头（第一页），那就让这个page参数，在当前页码上-1 -->
        <a href="/?page=<%= nowPage === 1 ? 1 : nowPage-1 %>" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <% for(var i=0; i < totalPage; i++){ %>
      <!-- -->
      <!-- 首先有个active的类，这个类表示当前激活的页码。如果当前页码，和循环时的i+1相等，就说明该页码应该被激活，页码里面的值 应该和 跳转的page参数保持一致 -->
      <li class="<%= nowPage === (i+1) ? 'active' : '' %>"><a href="/?page=<%= i+1 %>">
          <%= i+1 %></a></li>
      <% } %>
      <!-- 以下控制显示下一页的，这个下一页不能无限制的下一页，如果跳到最后一页，就始终给它设置为第一页，如果还没最后一页，那就让这个page参数，在当前页码上+1 -->
      <li>
        <a href="/?page=<%= nowPage === totalPage? totalPage : nowPage+1 %>" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>


  <%- include('./layout/footer.ejs')%>
</body>

</html>